<template>
  <view>
    <u-navbar :is-back="true" title="设置头像" :border-bottom="false"></u-navbar>
    <view class="wrap">
      <u-upload
        :custom-btn="true"
        ref="uUpload"
        :auto-upload="false"
        @on-choose-complete="onChooseComplete"
        :file-list="fileList"
        :max-size="10 * 1024 * 1024"
        max-count="1"
        width="690"
        height="690"
        :size-type="siteType"
      >
        <view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
          <u-icon name="plus" size="60" :color="$u.color['lightColor']"></u-icon>
        </view>
      </u-upload>
      <view class="u-m-t-20 btn">
        <u-button type="primary" @click="subProfile">提交</u-button>
      </view>
    </view>
  </view>
</template>

<script>
import { baseURL } from 'api/constant.js'
import { mapState } from 'vuex'
export default {
  data() {
    return {
      siteType: ['compressed'],
      fileList: []
    }
  },
  created() {
    this.fileList.push({ url: baseURL + '/' + this.vuex_user.avatarUrl })
    console.log(this.vuex_account, 'this.vuex_account')
  },
  computed: {
    ...mapState(['vuex_account', 'vuex_token', 'vuex_user']),
    // 服务器地址
    action() {
      return baseURL + `/api/user/update/${this.vuex_account}`
    },
    headers() {
      return { 'X-token': this.vuex_token }
    }
  },
  methods: {
    onChooseComplete(lists, name) {
      console.log(lists[0].url, 'lists[0].url')
      uni.uploadFile({
        // 这里是你上传图片的地址
        url: this.action,
        filePath: lists[0].url,
        nick: '卡卡',
        name: 'file',
        header: {
          'X-token': this.vuex_token
        },
        //	这个res是后端返回给你上传成功的数据里边一般会有上传之后图片的在线路径
        success: res => {
          // this.vuex_user.avatarUrl = baseURL + '/' + res.data.avatarUrl
          // this.$u.vuex('vuex_user', this.vuex_user)
          console.log(res,"res");
          this.$mytip.toast('头像修改成功')
        }
      })
    },

    subProfile() {
      // uni.$emit('updateAvatar', {})
      uni.switchTab({
        url: '/pages/center/center'
      })
    }
  }
}
</script>

<style>
page {
  background-color: #ffffff;
}
</style>
<style scoped lang="scss">
.wrap {
  padding: 30rpx;
}

.slot-btn {
  width: 690rpx;
  height: 690rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgb(244, 245, 246);
  border-radius: 10rpx;
}

.slot-btn__hover {
  background-color: rgb(235, 236, 238);
}
</style>
